<template>
	<view>
		<view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view v-if="current == 0">
			<u-cell-group title="未读 ·">
				<u-collapse :item-style="itemStyle">
					<u-collapse-item :title="item.title" v-for="(item, index) in uIndexData" :key="index" @change="changeRead(item,index)">
						<span style="display: inline-block; margin-bottom: 30rpx;">{{item.content}}</span>
					</u-collapse-item>
				</u-collapse>
			</u-cell-group>
			<u-gap height="40" bg-color="white"></u-gap>
			<u-cell-group title="已读 ·">
				<u-collapse :item-style="itemStyle">
					<u-collapse-item :title="item.title" v-for="(item, index) in indexData" :key="index">
						<span style="display: inline-block; margin-bottom: 30rpx;">{{item.content}}</span>
						<u-button class="u-m-l-10" type="error" size="mini" plain @click="deleteMessage(item,index)">删除</u-button>
					</u-collapse-item>
				</u-collapse>
			</u-cell-group>
		</view>
		<view v-if="current == 1">
			<u-cell-group title="未读 ·">
				<u-collapse :item-style="itemStyle">
					<u-collapse-item :title="item.title" v-for="(item, index) in uCourseTwo" :key="index" @change="changeRead(item,index)">
						<span style="display: inline-block; margin-bottom: 30rpx;">{{item.content}}</span>
					</u-collapse-item>
				</u-collapse>
			</u-cell-group>
			<u-gap height="40" bg-color="white"></u-gap>
			<u-cell-group title="已读 ·">
				<u-collapse :item-style="itemStyle">
					<u-collapse-item :title="item.title" v-for="(item, index) in courseTwo" :key="index" >
						<span style="display: inline-block; margin-bottom: 30rpx;">{{item.content}}</span>
						<u-button class="u-m-l-10" type="error" size="mini" plain @click="deleteMessage(item,index)">删除</u-button>
					</u-collapse-item>
				</u-collapse>
			</u-cell-group>
		</view>
		<view v-if="current == 2">
			<u-cell-group title="未读 ·">
				<u-collapse :item-style="itemStyle">
					<u-collapse-item :title="item[2]" v-for="(item, index) in uCourseThree" :key="index" @change="changeRead(item,index)">
						<span style="display: inline-block; margin-bottom: 30rpx;">{{item[0]}}<span style="color: #007AFF;" @click="makePhoneCall(item[1])">
							{{item[1]}}
						</span></span>
					</u-collapse-item>
				</u-collapse>
			</u-cell-group>
			<u-gap height="40" bg-color="white"></u-gap>
			<u-cell-group title="已读 ·">
				<u-collapse :item-style="itemStyle">
					<u-collapse-item :title="item[2]" v-for="(item, index) in courseThree" :key="index">
						<span style="display: inline-block; margin-bottom: 30rpx;">{{item[0]}}<span style="color: #007AFF;" @click="makePhoneCall(item[1])">
							{{item[1]}}
						</span></span>
						
							<u-button class="u-m-l-10" type="error" size="mini" plain @click="deleteMessageThree(item,index)">删除</u-button>
					</u-collapse-item>
				</u-collapse>
			</u-cell-group>
		</view>
		<u-modal v-model="xshow" :content="xcontent"></u-modal>
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				show:false,
				// 大批数据
				indexData:[],
				uIndexData:[],
				courseTwo:[],
				uCourseTwo:[],
				courseThree:[],
				uCourseThree:[],
				// 导航栏
				list: [{
					name: '主页通知'
				}, {
					name: '科目二'
				}, {
					name: '科目三',
					//count: 5
				}],
				current: 0,
				// 样式
				itemStyle: {
					marginLeft: '4%'
				},
				xshow:false,
				xcontent:''
			}
		},
		created(){
			let user = uni.getStorageSync("user");
			api.getNoticeList(user.branchId,this.globalConst.INDEX_NOTIFICATION_TYPE).then(res =>{
				//console.log(res)
				let data = res.data
				for (var i = 0;i < data.length;i++){
					if (data[i].readStatus === 0){
						this.uIndexData.push(data[i])
						continue;
					}
					this.indexData.push(data[i])
				}	
			})
			api.getNoticeList(user.branchId,this.globalConst.COURSE_TWO_TYPE).then(res =>{
				let data = res.data
				for (var i = 0;i < data.length;i++){
					if (data[i].readStatus === 0){
						this.uCourseTwo.push(data[i])
						continue;
					}
					this.courseTwo.push(data[i])
				}
			})
			api.getNoticeList(user.branchId,this.globalConst.COURSE_THREE_TYPE).then(res =>{
				let data = res.data
				for (var i = 0;i < data.length;i++){
					if (data[i].readStatus === 0){
						var info = data[i].content.split("：")
						info.push(data[i].title)
						info.push(data[i].id)
						this.uCourseThree.push(info)
						continue;
					}
					var info = data[i].content.split("：")
					info.push(data[i].title)
					info.push(data[i].id)
					this.courseThree.push(info)
				}
			})
		},
		methods: {
			change(index) {
				this.current = index;
			},
			changeRead:function(item,index){
				if(this.current===2){
					let id = item[3];
					item = {};
					item.id = id;
				}
				item.readStatus = 1;
				api.changeNoticeReadStatus(item).then(res => {
				})
			},
			makePhoneCall:function(item){
				uni.makePhoneCall({
					phoneNumber:item
				}).then(res=>{
					console.log("success")
				})
			},
			deleteMessage:function(item,index){
				api.deleteMessageById(item.id).then(res => {
					if (res.code === 0){
						if(this.current==0){
							this.indexData.splice(index,1);
						}else if(this.current==1){
							this.courseTwo.splice(index,1);
						}
						this.xshow = true;
						this.xcontent = '删除成功'
						
					}else{
						this.xshow = true
						this.xcontent = '删除失败'
					}
				})	
			},
			deleteMessageThree:function(item,index){
				api.deleteMessageById(item[3]).then(res => {
					if (res.code === 0){
						this.courseThree.splice(index,1)
						this.xshow = true;
						this.xcontent = '删除成功'
					}else{
						this.xshow = true
						this.xcontent = '删除失败'
					}
				})	
			}
		}
	}
</script>

<style>

</style>
